@function strip-unit($number) {
  @if type-of($number) == 'number' and not unitless($number) {
    @return $number / ($number * 0 + 1);
  }
  @return $number;
}

@function em($size, $base-font-size: 16px) {
  @return strip-unit($size) / strip-unit($base-font-size) * 1em;
}

.projectDetailContainer {
  height: 100%;
  display: flex;
  flex-direction: column;
  background-color: #f5f5f5;
  box-sizing: border-box;
  width: 93rem;
  margin-left: -0.5rem;

  nav {
    background-color: white;
    padding: 1em 3.5em;
    margin-bottom: 1em;
    border-radius: 0.625rem;
    .navtop {
      display: flex;
      padding-bottom: em(15px);
      justify-content: space-between;
      align-items: center;
      .title {
        font-size: 2.25rem;
        font-weight: 800;
      }
      .topright {
        display: inline-block;
        font-size: 1.125rem;
        padding: 0.3em 1em;
        border: 1px solid rgba(187, 187, 187, 1);
        color: rgba(129, 131, 143, 1);
        border-radius: 100em;
      }
    }

    .tags {
      display: inline-block;
      font-size: 1rem;
      background-color: #f2f2f4;
      color: rgba(16, 16, 16, 1);
      padding: 0.3em;
      border-radius: em(5px);
    }
    .bottom {
      margin-top: em(20px);
      font-size: em(20px);
      display: flex;
      color: rgba(51, 51, 51, 1);
      align-items: center;
    }
  }

  .projectCard {
    flex: 1;
    background-color: #ffffff;
    padding-left: 2em;

    :global(.ant-card-body) {
      height: 100% !important;
      padding-top: 0 !important;
    }
    :global(.ant-tabs-tab-btn) {
      font-size: 1.25em;
    }
    .ant-tabs-tab {
      font-size: 1em;
    }

    .ant-tabs-content {
      margin-top: 1em;
    }

    .projectImage {
      max-width: 100%;
      height: auto;
    }

    .tabs {
      overflow: auto;
      .tabTitle {
        font-size: 1.75rem;
        font-weight: 800;
        margin-bottom: 1em;
        display: inline-block;
      }
      .cardWrapper {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;

        .card {
          margin-bottom: 1em;
          width: 450px;
          border-radius: 1.25em;
          background-color: rgba(255, 255, 255, 1);
          border: 0.06em solid rgba(187, 187, 187, 1);
          padding: 1em;
          box-sizing: border-box;
          .cardTop {
            display: flex;
            align-items: center;
            .show {
              height: 4em;
              display: flex;
              justify-content: space-between;
              flex-direction: column;
              margin-left: 1em;
              .topTags {
                padding: 0em 0.9em;
                margin-top: -10px;
                border: 1px solid #b7b9b688;
                border-radius: 0.25em;
                background-color: rgba(255, 255, 255, 1);
                color: rgba(16, 16, 16, 1);
                font-size: 1rem;
                text-align: center;
                font-family: Roboto;
              }
            }
          }
          .cardBottom {
            color: rgba(16, 16, 16, 1);
            font-size: 17px;
            margin-top: 0.8em;
          }
        }
      }
    }
  }
}

